/*
* @Author: bin
* @Date:   2016-11-29 21:33:41
* @Last Modified by:   bin
* @Last Modified time: 2016-12-01 23:10:19
*/

'use strict';
var H5ComponentBase = function(name,cfg){
  var cfg = cfg||{};
  var id = ('h5_c_'+Math.random()).replace('.','_');
  var cls = 'h5_component_'+cfg.type;
  var component = $('<div class="h5_component '+cls+' h5_component_name_'+name+'" id="'+id+'">');
  cfg.text&&component.text(cfg.text);
  cfg.width&&component.width(cfg.width/2);
  cfg.height&&component.height(cfg.height/2);

  cfg.css&&component.css(cfg.css);
  cfg.bg&&component.css('backgroundImage','url('+cfg.bg+')');
  if(cfg.center===true){
    component.css({
      marginLeft:(cfg.width/4*-1)+'px',
      left:'50%'
    })
  }
  component.on('onLoad',function(){

    component.addClass(cls+'_load').removeClass(cls+'_leave')
    cfg.animateIn&&component.animate(cfg.animateIn);
      return false;
  })
  component.on('onLeave',function(){

      component.addClass(cls+'_leave').removeClass(cls+'_load')
      cfg.animateOut&&component.animate(cfg.animateOut);
      return false;
  })

  /*component.appendTo('body');*/
  return component;
}